import { Component } from 'react'
import { View, Text, Button, Image } from '@tarojs/components'
import './cata.less'
import Common, { getEvent } from '../utils/common';
let myEvent = getEvent();
export default class Cata extends Component {
    constructor(){
        super(...arguments)
        this.state={
            selectCata:null,
            cata:[
              {name:"专场",id:1},
              {name:"热销",id:2},
              {name:"折扣",id:3},
              {name:"主食",id:4},
              {name:"热炒",id:5},
              {name:"凉菜",id:6},
              {name:"特色菜",id:7},
            ]
        }
    }
    getSelect(item){
      if(this.state.selectCata&&this.state.selectCata.id!=item.id){
        this.setState({selectCata:item},()=>{
          this.props.onChangeCata&&this.props.onChangeCata(this.state.selectCata);
        });
        myEvent.emit("changeCata");
      }else if(!this.state.selectCata){
        this.setState({selectCata:item},()=>{
          this.props.onChangeCata&&this.props.onChangeCata(this.state.selectCata);
        });
        myEvent.emit("changeCata");
      }
    }
  render () {
    let {cata,selectCata}=this.state;
    return (
      <View className='cata'>
        {
          cata.map((item,index)=>{
            return <Text onClick={this.getSelect.bind(this,item)} 
            className={'text '+(selectCata&&selectCata.id==item.id?"select":"")} 
            key={index}>{item.name}</Text>
          })
        }
      </View>
    )
  }
}
